<template>
  <header>
    <!-- 左侧显示的东西 -->
    <div class="txt">
      <span v-if="!$slots.left" @click="$emit('clickLeft')">
        <van-icon name="arrow-left" v-if="leftArrow" />
        {{ leftText }}
      </span>
      <slot name="left" v-else></slot>
    </div>
    <!-- 中间显示的东西 -->
    <section>
      <!-- 没有插槽就使用 父传子传值 -->
      <span v-if="!$slots.center">{{ title }}</span>
      <slot name="center" v-else></slot>
    </section>
    <!-- 右侧显示的东西 -->
    <div class="txt">
      <span v-if="!$slots.right" @click="$emit('clickRight')">{{ rightText }}</span>
      <slot name="right" v-else></slot>
    </div>
  </header>
</template>
<script>
export default {
  props: {
    // 父传子接收
    title: {
      type: String,
      default: "千峰商城",
    },
    leftText: String, // 左侧的文字
    rightText: String,
    leftArrow: Boolean,
  },
  created() {
    // console.log(this.$slots);
  },
};
</script>
<style lang="scss" scoped>
header {
  background-color: red;
  height: 50px;
  display: flex;
  align-items: center;
  color: #fff;
  .txt {
    width: 70px;
    text-align: center;
    font-size: 14px;
  }
  section {
    flex: 1;
    text-align: center;
    font-size: 16px;
  }
}
</style>
